<template>
  <div class="camera">
     <div class="top_tool">
          <span>StreamLiving</span>

          <div class="sel">
            <span>Load Video</span>
            <span>  
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </span>
          </div>

        <div class="sel">
          <span>Size</span>
          <span>  
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </span>
        </div>
      <div class="sel">
          <span>Bitstream</span>
          <span>  
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </span>
      </div>
     </div>
  </div>
</template>

<script>
export default {
  name: 'CameraLiving',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.camera{
  .top_tool{
    height: 60px;
    width: 100%;
    background-color: #274582;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #ffffff;
    .sel{
      margin: 0 20px;
    }
    span{
      margin-left: 20px;
    }
    a{
      margin-left: 20px;
    }
  }
}

</style>
